<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!--<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />-->
		<title>登陆</title>
		<!-- 引入样式 -->
		<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
		<link rel="stylesheet" href="js/vue/element-ui.css" />

		<script type="text/javascript" src="js/config/jquery.min.js"></script>

		<style>
			html,
			body {
				font-family: 'Avenir', Helvetica, Arial, sans-serif;
				margin: 0;
				padding: 0;
				height: 100%;
			}
			
			.page {
				margin: 0;
				padding: 0;
				height: 100%;
				background: #eee;
			}
			
			.header {
				height: 4rem;
				background: #1da02b;
				padding: 0.5rem;
			}
			
			.my-logo {
				height: 100%;
				margin-left: 4rem;
				display: flex;
				align-items: center;
				font-size: 2rem;
				color: #fff;
				font-family: "楷体";
			}
			
			.content {
				height: calc(100% - 8rem);
				background: #fff;
				display: flex;
				justify-content: center;
			}
			
			.footbar {
				height: 3rem;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.footbar a {
				text-decoration: none;
			}
			
			.content-left {
				display: flex;
				align-items: center;
			}
			
			.content-left img {
				max-width: 30rem;
				height: auto;
			}
			
			.content-right {
				width: 32rem;
				display: flex;
				align-items: center;
			}
			
			.my-login {
				width: 22rem;
				margin: 1rem 1rem 1rem 6rem;
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			}
			
			.login-title {
				font-family: '楷体';
				border-left: 4px solid #1da02b;
				margin-top: 2rem;
				font-size: 1.5rem;
				padding: 0.05rem 0.2rem 0.05rem 2rem;
			}
			
			.login-form {
				padding: 1rem 2rem;
				display: flex;
				flex-direction: column;
			}
			
			.form-model {
				display: flex;
				padding-top: 0.5rem;
			}
			
			.form-model label {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 6rem;
				border: solid 1px #eee;
				border-right: none;
				background-color: #FBFBFB;
			}
			
			.login-btn {
				padding: 1rem;
			}
			
			.login-btn button {
				width: 100%;
			}
			
			@media screen and (max-width:965px) {
				/**当文档小于965px显示的样式**/
				.content-left {
					display: none;
				}
			}
		</style>
	</head>

	<body>
		<div class="page">
			<div class="header">
				<div class="my-logo">
					<span>管理系统</span>
				</div>
			</div>
			<div class="content">
				<div class="content-left">
					<img src="img/loginbg.png" />
				</div>
				<div class="content-right">
					<div id="login" class="my-login">
						<div class="login-title">
							<h4>用户登陆</h4>
						</div>

						<el-form :model="loginForm" :rules="rules" ref="loginForm" class="login-form">
							<el-form-item prop="username">
								<div class="form-model">
									<label>账号</label>
									<el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
								</div>
							</el-form-item>
							<el-form-item prop="password">
								<div class="form-model">
									<label>密码</label>
									<el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
								</div>
							</el-form-item>
							<div class="login-btn">
								<el-button type="success" @click="submitForm('loginForm')">登陆</el-button>
							</div>
						</el-form>
					</div>
				</div>
			</div>
			<div class="footbar">
				<span><a href="http://www.miitbeian.gov.cn" target="_blank">豫ICP备17024763号</a></span>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/config/appsetting.js"></script>
	<!-- 开发环境版本，包含了用帮助的命令行警告 -->
	<script type="text/javascript" src="js/vue/vue.js"></script>
	<script type="text/javascript" src="js/vue/element-ui.js"></script>

	<!-- 生产环境版本，优化了尺寸和速度 -->
	<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

	<!-- import JavaScript -->
	<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->

	<script>
		new Vue({
			el: '#login',
			data: function() {
				return {
					loginForm: {
						username: '',
						password: ''
					},
					rules: {
						username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						}, ],
						password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						}],
					},

				}
			},
			methods: {
				submitForm: function(formName) {

					var json = new Object();
					json.Name = this.loginForm.username;
					json.Password = this.loginForm.password;
					
					this.$refs[formName].validate(function(valid) {
						if(valid) {
							
							ajaxpost({
								url: 'api/SysLogin/Login',
								data: json,
								success: function(res) {
									console.log(res);
								}
							})

						}
					})
				}

			}
		})
	</script>

</html>